<template>
  <view class="contain">
    <view class="goBack">
      <!-- 刘海空白区域 -->
    </view>
    <!-- 用户信息 -->
    <view class="userInfo">
      <view class="userInfoLeft">
        <image :src="userInfo.avatar" mode=""></image>
      </view>
      <view class="userInfoRight">
        <view class="userInfoRightTop">
          <view class="userInfoRightTopName">
            {{userInfo.nickname}}
          </view>
          <view class="userInfoRightTopVip" v-if="userInfo.integral > 1">
            <image src="@/static/my/vip.png" mode=""></image>
          </view>
        </view>
        <!-- id & 积分 -->
        <view class="userInfoRightCenter">
          <view class="userInfoId">
            ID：{{userInfo.uid}}
          </view>
          <view class="userInfoCount">
            积分：
            <view class="userInfoCountRight">
              {{userInfo.integral ? userInfo.integral : 0}}
            </view>
          </view>
        </view>
        <!-- 会员提示 & 次数 -->
        <view class="userInfoRightBottom">
          <view class="userInfoVip">
            <!-- 会员或游客(VIP图标开通后显示) -->
          </view>
        </view>
      </view>
    </view>
    <!-- 购买会员 -->
    <view class="center">
      <view class="buyVip">
        <view class="buyVipContain">
          <view class="buyVipContainImage">
            <image src="@/static/my/vip.png"></image>
          </view>
          <view class="goBuyVip">
            <view class="">
              购买会员
            </view>
            <view class="goBuyVipBottom">
              剩余积分为{{userInfo.integral ? userInfo.integral : 0}}
            </view>
          </view>
          <view class="goOpen">
            <view class="goOpenContain" @click="goBuyVip">
              立即开通
            </view>
          </view>
        </view>
      </view>
      <!-- 会员中心 & 设置 -->
      <view class="vipCenter">
        <view class="vipCenterTop">
          <view class="goVipCenter" @click="goVipCenter">
            <image src="@/static/my/vip.png" mode=""></image>
            <view class="goVipCenterText">
              会员中心
            </view>
          </view>
        </view>
        <view class="vipCenterTop">
          <view class="goConect" @click="goConect">
            <image src="@/static/my/connect.png" mode=""></image>
            <button open-type="contact">联系我们</button>
          </view>
        </view>
        <view class="vipCenterTop">
          <view class="settings" @click="goSettings">
            <view class="goSettingsImg">
              <image src="@/static/my/settings.png" mode=""></image>
            </view>

            <view class="settingsText">
              设置
            </view>
          </view>
        </view>
        <view class="vipCenterTop">
          <view class="album" @click="goAlbulm">
            <view class="albumImg">
              <image src="@/static/my/album.png" mode="aspectFit"></image>
            </view>

            <view class="albumText">
              历史记录相册
            </view>
          </view>
        </view>
        <view class="vipCenterTop" @click="popTit">
          <view class="collect">
            <view class="collectImg">
              <image src="@/static/my/collect.png" mode=""></image>
            </view>
            <view class="collectText">
              我的收藏
            </view>
          </view>
        </view>
      </view>
      <!-- 退出登录 -->
      <view class="goQuiet" @click="goLogin">
        退出登录
      </view>
    </view>
  </view>

</template>

<script setup>
  import {
    getUserInfo
  } from '@/api/my.js'
  import {
    ref,
    onMounted,
    reactive
  } from 'vue'
  import {
    onShow
  } from '@dcloudio/uni-app'
  let userInfo = ref({})
  const tabbarIndex = ref(5)
  // //获取用户信息
  // onMounted(() => {
  //   // 在这里执行获取数据或初始化操作
  //   getUserInfo().then(res => {
  //     userInfo.value = res.data
  //   })
  // });
  onShow(() => {
    // 在这里执行获取数据或初始化操作
    getUserInfo().then(res => {
      userInfo.value = res.data
    })
  })
  //跳转到购买会员页面
  const goBuyVip = () => {
    uni.navigateTo({
      url: '/pages/my/goBuyVip'
    })
  }

  //跳转到会员中心页面
  const goVipCenter = () => {
    uni.navigateTo({
      url: '/pages/my/vipCenter'
    })
  }

  //提示
  const popTit = () => {
    uni.showToast({
      title: "正在开发中...",
      icon: "none"
    })
  }

  // 跳转到设置页面
  const goSettings = () => {
    uni.navigateTo({
      url: '/pages/my/settings'
    })
  }
  //跳转到历史记录相册页面
  const goAlbulm = () => {
    uni.navigateTo({
      url: '/pages/my/album'
    })
  }

  //退出登录
  const goLogin = () => {
    //跳转到首页
    uni.removeStorageSync('token');

    // #ifdef H5
    uni.navigateTo({
      url: '/pages/login/login'
    })
    // #endif

    // #ifdef MP
    uni.navigateTo({
      url: '/pages/login/weChantLogin'
    })
    // #endif
  }
</script>

<style lang='scss' scoped>
  uni-button:after {
    border: 0;
  }
  .contain {
    width: 100%;
    height: 75vh;

    /* 刘海空白区域 */
    .goBack {
      width: 100%;
      height: 130rpx;
      display: flex;
      align-items: center;
    }

    /* 用户信息 */
    .userInfo {
      width: 100%;
      height: 133rpx;
      padding-bottom: 10rpx;
      display: flex;

      /* 用户头像 */
      .userInfoLeft {
        width: 130rpx;
        height: 100%;
        display: flex;
        justify-content: center;

        image {
          width: 100rpx;
          height: 110rpx;
          border-radius: 15rpx;
        }
      }

      .userInfoRight {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        /* 名字 */
        .userInfoRightTop {
          display: flex;

          .userInfoRightTopName {
            font-weight: 600;
          }

          .userInfoRightTopVip {
            width: 50rpx;
            height: 30rpx;
            margin-left: 10rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        /* id&积分 */
        .userInfoRightCenter {
          display: flex;

          .userInfoId {
            width: 400rpx;
          }

          .userInfoCount {
            display: flex;
            font-weight: 600;

            .userInfoCountRight {
              color: red;
            }
          }
        }

        /* 会员规则 & 体验次数 */
        .userInfoRightBottom {
          display: flex;

          .userInfoVip {
            width: 400rpx;
          }
        }
      }
    }

    .center {
      width: 100%;
      height: 100%;
      padding: 0 10rpx;
      background-color: #f8f7f6;

      /* 购买会员 */
      .buyVip {
        width: 100%;
        /* //height: 140rpx; */
        padding: 20rpx 0;

        .buyVipContain {
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, #fff041, 20%, #ffcc42);
          border-radius: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          /* 购买会员图片 */
          .buyVipContainImage {
            width: 150rpx;
            /* height: 100%; */
            height: 100rpx;
            padding: 20rpx 10rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .goBuyVip {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .goBuyVipBottom {
              font-weight: 600;
              color: red;
            }
          }

          /* 立即开通 */
          .goOpen {
            width: 170rpx;
            height: 100%;
            display: flex;
            align-items: center;

            .goOpenContain {
              width: 140rpx;
              height: 50rpx;
              background-color: #ab7500;
              border-radius: 20rpx;
              text-align: center;
              line-height: 50rpx;
              color: #f6c546;
            }
          }
        }
      }

      /* 会员中心 */
      .vipCenter {
        width: 100%;
        height: 430rpx;
        background-color: #fff;
        border-radius: 40rpx;
        padding: 20rpx 0;
        display: flex;
        flex-wrap: wrap;

        .vipCenterTop {
          width: 180rpx;
          height: 180rpx;
          margin: 10rpx 30rpx;
          border-radius: 20rpx;

          /* 会员中心 */
          .goVipCenter {
            width: 100%;
            height: 180rpx;
            border-radius: 20rpx;
            background-color: #ffffd6;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30rpx 0;

            image {
              width: 50%;
              height: 50%;
            }

            .goVipCenterText {
              margin-top: 20rpx;
            }
          }

          /* 联系我们 */
          .goConect {
            width: 100%;
            height: 180rpx;
            border-radius: 20rpx;
            background-color: #ccf5dd;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30rpx 0;

            image {
              width: 45%;
              height: 58%;
            }

            /* 按钮 */
            button {
              width: 100%;
              height: 30%;
              line-height: 100%;
              background-color: #ccf5dd;
              display: flex;
              justify-content: center;
              font-size: 30rpx;
              margin-top: 20rpx;
            }
          }

          /* 设置 */
          .settings {
            width: 100%;
            height: 180rpx;
            border-radius: 20rpx;
            background-color: #eabfbf;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10rpx;

            /* 设置图片 */
            .goSettingsImg {
              width: 88%;
              height: 95rpx;
              display: flex;
              justify-content: center;
              align-items: center;

              image {
                width: 53%;
                height: 85%;
              }
            }

            .settingsText {
              margin-top: 5rpx;
            }
          }

          /* 历史记录相册 */
          .album {
            width: 180rpx;
            height: 180rpx;
            border-radius: 20rpx;
            background-color: #6066db;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10rpx 0;

            /* 历史记录相册图标 */
            .albumImg {
              width: 95%;
              height: 90rpx;
              display: flex;
              justify-content: center;

              image {
                width: 40%;
                height: 100%;
                margin-top: 10rpx;
              }
            }

            .albumText {
              color: #fff;
              margin-top: 15rpx;
            }
          }

          /* 我的收藏 */
          .collect {
            width: 180rpx;
            height: 180rpx;
            border-radius: 20rpx;
            background-color: #6066db;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10rpx 0;

            /* 收藏图片 */
            .collectImg {
              width: 80%;
              height: 85rpx;
              display: flex;
              justify-content: center;
              align-items: center;

              image {
                width: 60%;
                height: 100%;
                margin-top: 10rpx;
              }
            }

            .collectText {
              margin-top: 20rpx;
              color: #fff;
            }

          }
        }
      }

      /* 退出登录 */
      .goQuiet {
        width: 100%;
        height: 80rpx;
        background: linear-gradient(to right, #ff9743, 30%, #ff5b40);
        margin-top: 20rpx;
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
      }
    }
  }
</style>